实现Sticky Footer布局

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

Sticky Footer：页脚Footer永远固定在页面的底部。页面的内容不够时页脚固定在视窗底部，页面内容足够长时页脚紧贴在内容后面。

flex

1
2
3
4
5
<body>
    <header>Header</header>
    <div class="content">...</div>
    <footer class="footer">Footer</footer>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
}

See the Pen sticky footer粘性页脚实现 - flex by ly023 (@ly023) on CodePen.

position sticky

CSS position:sticky 兼容性

1
2
3
4
5
<body>
    <header>Header</header>
    <div class="content">...</div>
    <footer class="footer">Footer</footer>
</body>
1
2
3
4
5
6
7
8
9
html,
body {
  height: 100%;
}

.footer {
  position: sticky;
  top: 100vh;
}

See the Pen sticky footer粘性页脚实现 - position sticky by ly023 (@ly023) on CodePen.